<template>
    <!--交易明细-->
    <div class="app-wrap">
        <div class="transaction-details">
            <ul class="head">
                <li v-for="(v,i) in navHead" :class="v.clazz" :key="i"><a @click="changeType(v)" href="javascript:void(0)">{{v.name}}</a></li>
            </ul>
            <div style="overflow:scroll; height: 100%; -webkit-overflow-scrolling : touch;">
                <mt-loadmore bottomPullText="加载更多" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
                    <ul class="body">
                        <li class="current">
                            <dl>
                                <dd v-for="(v,i) in totalAllList" :key="i">
                                    <div class="name">{{v.tradeIntro}}</div>
                                    <div class="date">{{v.tradeDate | formatDate('yyyy.MM.dd')}}</div>
                                    <div class="num orange" v-if="Number(v.tradeType)==1">+{{v.mount | fixedAmount(2)}}</div>
                                    <div class="num" v-else-if="Number(v.tradeType)==2">-{{v.mount | fixedAmount(2)}}</div>
                                    <div class="num" v-else>{{v.mount | fixedAmount(2)}}</div>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </mt-loadmore>
            </div>
        </div>
    </div>
</template>

<script>

    import util from '@/util/util';
    import { Toast,Loadmore,Indicator } from 'mint-ui';
    export default {
        name: "transactionDetail",
        filters:{
            formatDate(val,pattern){
                return util.formatDate.format(val,pattern);
            },
            fixedAmount(val,pattern){
                return util.isNumber(val)?Number(val).toFixed(pattern):'0.00';
            }
        },
        data(){
            return {
                navHead:[
                    {name:'全部',clazz:'current',typeCode:'0'},
                    {name:'充值',clazz:'',typeCode:'1'},
                    {name:'提现',clazz:'',typeCode:'2'},
                    {name:'投资',clazz:'',typeCode:'3'}
                ],
                navObj:{},//当前是全部还是充值还是提现还是投资
                pageData:{
                    currentPage:1,    //currentPage  查询页码
                    typeCode:'0'        //0全部1充值2提现3投资
                },
                //这个数据方便自己看里面的数据结构
                resultData:{
                    endRow:0,
                    nextPage:0,//下一页
                    pageIndex:0,//当前页号
                    pageSize:10,//页面数据条数
                    prePage:1,//上一页
                    record:0,//记录总数
                    sartRow:0,
                    totalPageCount:0,//总页数
                    houseList:[]
                },
                totalAllList:[],
                allLoaded:false,//下拉刷新
            }
        },
        methods:{
            loadTop(){
                // 加载更多数据
                console.log('下拉加载数据');
                this.changeType(this.navObj);
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom() {
                // 加载更多数据
                console.log('上拉加载数据');

                if(this.resultData.pageIndex==this.resultData.totalPageCount){//当前页等于最大页数
                    this.allLoaded = true;// 若数据已全部获取完毕
                }
                this.pageData.currentPage++;
                this.commContent();
                this.$refs.loadmore.onBottomLoaded();
            },
            //类型切换
            changeType(v){
                this.navObj = v;
                this.navHead.forEach(item=>item.clazz='');
                v.clazz = 'current';
                //以上是样式切换
                //以下是数据初始化
                this.pageData.currentPage = 1;
                this.pageData.typeCode = v.typeCode;//0全部1充值2提现3投资
                this.totalAllList = new Array();//清空重新开始加载
                this.allLoaded = false;// 若数据已全部获取完毕
                this.commContent();
            },
            commContent(){
                Indicator.open();//防止重复表单提交，一个加载中的遮罩层
                this.$store.dispatch('qureyEmployeeFinanceDetailInfoHFive',this.pageData).then(resp=>{
                    console.log(resp.data);
                    this.resultData = resp.data;
                    this.totalAllList = this.totalAllList.concat(this.resultData.houseList);

                    Indicator.close();
                });
            }
        },
        created(){
            this.commContent();
        }
    }
</script>

<style scoped>
</style>
